<div id="formDiv">

</div>
<script id="formContent" type="text/html">
<form class="layui-form" id="addCustomerProductForm" style="padding: 0 20px" lay-filter="addCustomerProductForm">
    <div class="open-details-title" style="margin:10px 0">客户与订单信息</div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-inline">
                <select name="customerId" id="customerId" lay-filter="customerId"></select>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">客户编码</label>
            <div class="layui-input-inline">
                <input type="text" name="id" disabled
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">所属渠道</label>
            <div class="layui-input-inline">
                <input type="text" name="agentName"
                       class="layui-input">
            </div>
        </div>
    </div>

    <!-- 客户级别, 录入人, 录入时间 -->
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">客户级别</label>
            <div class="layui-input-inline">
                <input type="text" name="agentCategoryName" disabled
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">录入人</label>
            <div class="layui-input-inline">
                <input type="text" name="salesmanName" disabled
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">录入时间</label>
            <div class="layui-input-inline">
                <input type="text" name="createTime" id="createTime" disabled
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">客服代表</label>
            <div class="layui-input-inline">
                <input type="text" name="creatorName" disabled
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="open-details-title" style="margin:10px 0">产品客户信息</div>

    <!-- 客服代表, 客户物料名称, 客户物料编码 -->
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">客户物料名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">客户物料编码</label>
            <div class="layui-input-inline">
                <input type="text" name="code"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">客户规格码</label>
            <div class="layui-input-inline">
                <input type="text" name="spec"
                       class="layui-input">
            </div>
        </div>
    </div>
    <!-- 客户规格码, 上传附件, 是否需要包装 -->
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">上传附件</label>
            <div class="layui-input-inline">
                <input type="file" name="enclosure" id="enclosure" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">是否需要包装</label>
            <div class="layui-input-inline">
                <select name="hasPack">
                    <option value="">请选择</option>
                    <option value="true">需要包装</option>
                    <option value="false">不需要包装</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">包装说明</label>
            <div class="layui-input-inline">
                <input type="text" name="packInstructions"
                       class="layui-input">
            </div>
        </div>
    </div>
    <!-- 包装说明, 是否需要表面处理, 表面处理说明 -->

    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">是否需要表面处理</label>
            <div class="layui-input-inline">
                <select name="surfaceTreatment">
                    <option value="">请选择</option>
                    <option value="yhandle">需要</option>
                    <option value="nhandel">不需要</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-form-item">
            <label class="layui-form-label">表面处理说明</label>
            <div class="layui-input-inline">
                <input type="text" name="surfaceTreatmentExplain" id="surfaceTreatmentExplain"
                       class="layui-input">
            </div>
        </div>
    </div>

    <!-- 提交按钮 -->
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="addCustomerProductBtn">提交</button>
        </div>
    </div>
</form>
</script>

<script>
    layui.use(['form'], function () {
        $ = layui.jquery;
        var form = layui.form;
        var admin = layui.admin;
        let data={...parentData}
        laytpl(formContent.innerHTML).render({...parentData}, function (html) {
            $('#formDiv').html(html);
        })
        if(data){
            form.val(data)
            // admin.initDataSelect('enterprise/sell/admin/order/getCustomers', {}, 'customerId', null, '客户名称', 'customerName')
        }
        form.on('select(customerId)', function (data) {
            form.val('addCustomerProductForm', {
                id: '',
                agentName: '',
                agentCategoryName: '',
                salesmanName: '',
                createTime: '',
                creatorName: '',
            })
            admin.req('enterprise/sell/admin/customersInfo/list', {
                id: data.value
            }, function (res) {
                if (res.data.length > 0) {
                    form.val('addCustomerProductForm', res.data[0])
                }
            })
        })

        // 监听提交
        form.on('submit(addCustomerProductBtn)', function (d) {
            const formData = d.field
            formData.extProductCode = formData.code
            formData.externalProductForm = [{
                code: formData.code,
                hasPack: formData.hasPack,
                name: formData.name,
                packInstructions: formData.packInstructions,
                spec: formData.spec,
            }]

            admin.req('enterprise/sell/admin/customerProductCatalog/add',
                JSON.stringify(formData)
                , function (res) {
                    layer.closeAll('page');
                }, 'POST', true, 'application/json; charset=utf-8')
            return false;
        });
    });
</script>

<style>
    .layui-form-label {
        width: 120px;
    }

</style>